<template>
  <el-row style="margin-top: 20px;height: 540px">
    <el-col :span="24">
      <el-table
          ref="inboundsTable"
          :data="inbounds"
          border
          :stripe="true"
          style="margin-top: 10px"
          height="480"
          v-show="inbounds.length != 0"
      >
        <el-table-column prop="drugName" label="药品名称"/>
        <el-table-column prop="docName" label="操作人员"/>
        <el-table-column prop="inboundNumber" label="出库数量"/>
        <el-table-column prop="createTime" label="出库时间">
          <template #default="{row}">
            {{ formatTime(row.createTime) }}
          </template>
        </el-table-column>
      </el-table>
      <el-empty
          v-show="inbounds.length == 0"
          image="https://xinghm-projectone-qd-task.oss-cn-shanghai.aliyuncs.com/exampledir/noData.jpg"
          :image-size="400">
        <el-button type="warning" icon="Search" @click="resetting">重置</el-button>
      </el-empty>
    </el-col>
  </el-row>
  <!-- 分页栏 -->
  <el-row style="margin-top: 20px" v-show="inbounds.length != 0">
    <!-- 监听页码的变化事件 -->
    <el-pagination @change="changePage" :total="total" background layout="prev, pager, next"/>
  </el-row>
</template>

<script>
import {fetchBoundList} from "@/api/bound.js";

export default {
  name: "inbound",
  data() {
    return {
      inbounds: [],
      total: 0,
      pageNum: 1,
      limit: 10
    }
  },
  created() {
    this.fetchAllInbound();
  },
  methods: {
    formatTime(timeStr) {
      const appointmentTime = new Date(timeStr);
      const year = appointmentTime.getFullYear();
      const month = String(appointmentTime.getMonth() + 1).padStart(2, '0');
      const day = String(appointmentTime.getDate()).padStart(2, '0');
      return `${year}年${month}月${day}日`;
    },
    changePage(value) {//更新页码时更新数据
      this.pageNum = value;// 修改页码数据
      // 重新加载数据
      this.fetchAllInbound();
    },
    resetting() {
      this.fetchAllInbound();
    },
    async fetchAllInbound() {
      const response = await fetchBoundList(1, this.pageNum, this.limit);
      this.inbounds = response.data.data.data;
      this.total = response.data.data.total;
    }
  }
}
</script>

<style scoped>

</style>
